<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>我的订单</title>
    <link rel="stylesheet" href="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/common.6b1d782c.css"/>
    <link rel="stylesheet" href="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/home-index.fce66dcb.css"/>
    <script crossorigin="anonymous" src="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/stat.88d57c80.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <%--    引入layui样式--%>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">
    <%--    1. 引入bootstrap.css--%>
    <link rel="stylesheet" href="/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <%--    2. 引入自定义的css文件--%>
    <link rel="stylesheet" href="/css/nav.css">

    <style>
        .cart_img img {
            width: 10px;
            height: 10px;
        }
        .text_slice {
            width: 200px;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>

</head>
<body>
<div class="header">
    <div class="header-inner">
        <div class="city-container" data-val="{currentcityid:90 }">
            <div class="city-name">
                大庆
                <span class="caret"></span>
            </div>
        </div>

        <div class="nav">
            <ul class="navbar">
                <li><a href="/index.jsp" data-act="home-click" >首页</a></li>
                <li><a href="/movie/index" data-act="movies-click" >订票</a></li>
                <li><a href="/index2.jsp" data-act="cinemas-click" >影院</a></li>
                <li><a href="/index4.jsp" data-act="board-click" >榜单</a></li>
                <li><a> </a></li>
                <li><a> </a></li>
                <li><a> </a></li>
                <li><a> </a></li>
                <li><a> </a></li>
            </ul>
        </div>
        <li>
            <form class="navbar-form navbar-left" role="search">
                <div class="input-group">
                    <input value="${name}" type="text" id="search_input" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" onclick="search_name()">search</button>
                    </span>
                </div>
            </form>
        </li>
        <script>
            // 搜索按钮完成的功能
            function search_name(){
                //1. 获取搜索的文本框中输入的数据
                let search_input_value = document.getElementById("search_input").value;
                //2. 发送参数到后台
                //window.localtion='url?参数名1=参数值2&参数名2=参数值2&参数名3=参数值4'
                window.location='/movie/index?name='+search_input_value;
            }
        </script>

        <div class="user-info">
            <div class="user-avatar J-login">
                <img class="nav_img" src="/imgs/田氏影业logo.png">
                <span class="caret"></span>
                <ul class="user-menu no-login-menu">
                    <li><a href="/user/index3" data-act="board-click" >登录</a></li>
                    <li><a href="/nav.jsp" data-act="board-click" >关于我们</a></li>

                    <c:if test="${user!=null}">

                        <li><a href="/cart/index">我的订单</a></li>
                        <li><a href="/user/exit">退出</a></li>
                    </c:if>

                </ul>
            </div>
        </div>
    </div>
</div>
<%--    导航end--%>

<script>
    // 搜索按钮完成的功能
    function search_name(){
        //1. 获取搜索的文本框中输入的数据
        let search_input_value = document.getElementById("search_input").value;
        //2. 发送参数到后台
        //window.localtion='url?参数名1=参数值2&参数名2=参数值2&参数名3=参数值4'
        window.location='/movie/index?name='+search_input_value;

    }
</script>

<%= new Date()%>

<div class="container-fluid" style="margin-top: 40px">
    <div class="row">
        <div class="table-responsive">
            <table class="table">
                <li><a> </a></li>
                <li><a> </a></li>
                <caption>我的订单列表</caption>
                <thead>
                <tr>
                    <th><input type="checkbox"></th>
                    <th>序号</th>
                    <th>电影</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>总价</th>
                    <th>删除</th>
                    <th>支付订单</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${cartList}" var="c" varStatus="vs">
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>${vs.count}</td>
                        <td><img src="/imgs/${c.img}"></td>
                        <td>${c.name}</td>
                        <td>${c.moviePrice}</td>
                        <td><input onblur="change_num(this,${c.id})" type="number" style="width: 50%" value="${c.counts}" class="form-control"></td>
                        <td>${c.price}</td>
                            <%--                                a超链接触发一个单击事件--%>
                        <td><a href="javascript:del_cart(${c.id})" class="text-danger"><span class="glyphicon glyphicon-trash"></span></a></td>

                        <td><button class="btn btn-link" onclick="del_cart2(this,${c.id})">支付订单</button></td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>

    </div>
</div>

<%--    引入layui - js--%>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>

<%--    2. 先引入jquery.min.js--%>
<script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
<%--    3. 引入bootstrap.js文件--%>
<script type="text/javascript" src="/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script>
    //删除购物车 - 同步
    function del_cart(id){
        layer.confirm('确认删除吗?', function(){
            //确定按钮
            window.location="/cart/del?id="+id;
            //关闭这个询问框
            layer.closeAll();
        })
    }

    //异步删除 - 对js要求高
    function del_cart2(obj,cid){

        layer.confirm('是否支付订单?', function(index){

            $.get('/cart/ajaxDel',{id:cid},function(data){
                if(data.code=="200"){
                    //直接使用js操作dom
                    //js删除所在的删除行
                    //obj是一个js对象
                    //js对象要转换成jquery对象 - $(js对象)

                    $(obj).parent().parent().remove();

                    layer.msg('支付成功')

                }

                //关闭这个询问框
                layer.close(index);
            });

        })
    }

    // 更新数量的函数
    function change_num(obj,id){//obj - this当前对象 - input对象,js对象.属性
        $.get('/cart/update',{id:id,counts:obj.value},function(data){//ajax操作
            if(data.code=="200"){
                //js操作dom
                //1. 获取页面的单价
                let p_price = parseFloat($(obj).parent().prev().html());
                //2. 计算最新的总价
                let total = parseFloat(obj.value)*p_price;
                //3. 将总价重新填充到页面中
                let next_td = $(obj).parent().next();
                //html() - 没有参数,获取标签内部的元素
                //html(参数) - 将参数设置到标签内部
                next_td.html(total);
            }
        })
    }
</script>
</body>
</html>
